/**
 * Created with JetBrains PhpStorm.
 * User: vander
 * Date: 3/6/13
 * Time: 11:33 PM
 * To change this template use File | Settings | File Templates.
 */
var MyButton = Class.create({
    //Init voi 1 display object co the co 4 thuoc tinh nhu sau: top, left, width, height
    initialize: function (o, parentNode, zIndex) {
        //o= {id, imgSources, displayOptions}

        this.id = o.id;

        //Tao the div bao ben ngoai img
        this.divTag = new Element('div', { 'id': this.id });
        this.divTag.setStyle({
            position: 'absolute', top: o.displayOptions.top + 'px', left: o.displayOptions.left + 'px',
            width: o.displayOptions.width + 'px', height: o.displayOptions.height + 'px'
        });

        this.zIndex = zIndex || 0;
        this.setZIndex(this.zIndex);

        //imgArray, {width: display.width, height: display.height}, this.divTag);
        this.my2DSprite = new My2DSprite({
            imgSources: o.imgSources
        }, this.divTag);

        //Kiem tra parent index
        if (parentNode === undefined) {
            //them vao trang index
            $(document.body).insert(this.divTag);
        }
        else {
            $(parentNode).insert(this.divTag);
        }
    },
    update: function () {
        this.my2DSprite.update();
    },
    draw: function (parentDiv) {

    },
    setTop: function (t) {
        $(this.divTag).setStyle({ top: t + 'px' });
    },
    getTop: function(){
        return parseInt($(this.divTag).getStyle("top"));
    },
    setLeft: function (l) {
        $(this.divTag).setStyle({ left: l + 'px'});
    },
    getLeft: function(){
        return parseInt($(this.divTag).getStyle("left"));
    },
    setWidth: function(w){
        this.my2DSprite.setWidth(w);
        $(this.divTag).setStyle({ width: w + 'px'});
    },
    getWidth: function(){
        return parseInt($(this.divTag).getStyle("width"));
    },
    setHeight: function(h){
        this.my2DSprite.setHeight(h);
        $(this.divTag).setStyle({ height: h + 'px' });
    },
    getHeight: function(){
        return parseInt($(this.divTag).getStyle("height"));
    },
    setZIndex: function(z){
        $(this.divTag).setStyle({zIndex: z});
    },
    getZIndex: function(){
        return parseInt($(this.divTag).getStyle("zIndex"));
    },
    setVisibility: function(t){
        if(t){
            $(this.divTag).setStyle({visibility: "visible"});
        }
        else{
            $(this.divTag).setStyle({visibility: "hidden"});
        }
    },
    isVisible: function(){
        if($(this.divTag).getStyle("visibility") == "visible"){
            return true;
        }
        return false;
    },
    registerEvent: function (o) {
        //o = {type, eventHandler, data}

        this.divTag.observe(o.type, function (event) {
            o.eventHandler(o.data);
        });
    }
});